<template>
  <el-dialog :title="DialogData.title" :visible.sync="DialogData.showDialog" @close="cancel">
    <el-form :model="Form" :rules="rules" ref="ruleForm" class="role-ruleForm">
      <el-form-item label="RoleName" prop="role">
        <el-input v-model="Form.role"></el-input>
      </el-form-item>
      <el-form-item label="菜单权限" style="margin-top:5px;"> 
      </el-form-item>
      <menu-item v-for="route in asyncRoutes" :key="route.path" :item="route" :ref="route.path"></menu-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
//import { mapGetters } from "vuex"
import {asyncRoutes} from "../../../router/router"
import MenuItem from "./MenuItem"
import {conversionPagePermission} from "../../../untils/pagePermission"
export default {
  components:{MenuItem},
  props: {
    DialogData: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  created(){
    this.asyncRoutes=asyncRoutes
  },
  data() {
    this.temp=[];
    return {
      dialogFormVisible: false,
      asyncRoutes:[],
      Form: {
        role: ""
      },
      rules: {
        role: [
          { required: true, message: "please input roleName", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    cancel() {
      this.temp=[];
      this.$refs["ruleForm"].resetFields();
      this.resetChildData(this.$refs);
      this.$emit("closeDialog",false)
    },
    submitForm() {
      this.temp=[];
      this.getRolePermission(this.$refs)
      //console.log("打印：",conversionPagePermission(this.temp));
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          alert("submit!");
          this.resetChildData(this.$refs);
          this.$emit("closeDialog",false)
        } else {
          return false;
        }
      });
    },
    resetChildData(ref){
      for(let curr in ref){
        if(curr==='ruleForm'){
          //return
        }else{
          ref[curr].forEach(item=>{
            if(Object.keys(item.$refs).length===0){
              item.resetData();
            }else{
              this.resetChildData(item.$refs)
            }
          })
        }
      }
    },
    getRolePermission(ref){
      for(let curr in ref){
        if(curr==='ruleForm'){
          //return
        }else{
          ref[curr].forEach(item=>{
            if(Object.keys(item.$refs).length===0){
              this.temp.push({"menuName":item.onlyOneChild.meta.title,"pagePermissions":item.checkedpermissions})
            }else{
              this.getRolePermission(item.$refs)
            }
          })
        }
      }
    }
  }
};
</script>